<template>
	<view class="content">
		<topMenu></topMenu>
		<!-- <smh-time-range :time="['12','30','0','17','30']" @confrim="confrim" @cancel="cancel"></smh-time-range> -->
		<view class="skms-content">
			<view class="skms-item" v-for="(item,index) in deviceListData">
				<text class="tit">{{item.mName}}</text>
				<view class="time-select">
					<view class="pullDown-box" @click="openOption(index,item.startTemp,item.id,'startTemp')">
						<text class="time-lable">{{item.startTemp}}°C</text>
						<image class="pullDown-img" src="../../static/img/pullDown.png" mode="aspectFit"></image>
					</view>
					<text>-</text>
					<view class="pullDown-box" @click="openOption(index,item.endTemp,item.id,'endTemp')">
						<text class="time-lable">{{item.endTemp}}°C</text>
						<image class="pullDown-img" src="../../static/img/pullDown.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		 
		<gdPicker :data="list" ref="gPicker" @getVal="getVal" label="label"></gdPicker>
		<tab-bar ref="tabBar"></tab-bar>
	</view>
</template>

<script>
 
	import topMenu from '../../components/top-menu/top-menu.vue'
	import gdPicker from '../../components/gdPicker/gdPicker.vue' 
	import {setTemp} from "@/api/api.js";
	
	    import {setTime,deviceList} from "@/api/api.js";
	    export default {
	        components:{
	            topMenu,
				gdPicker
	        },
	        data() {
	            return {
					timeSelctIsShow:false,
					startTime:'',
					endTime:'',
					deviceListData:[],
					currentIndex:null,
					list:[{label:'1',id:1},{label:'2',id:2},{label:'3',id:3},{label:'4',id:4},{label:'5',id:5},{label:'6',id:6},{label:'7',id:7},{label:'8',id:8},{label:'9',id:9},{label:'10',id:10},{label:'11',id:11},{label:'12',id:12},{label:'13',id:13},{label:'14',id:14},{label:'15',id:15},{label:'16',id:16},{label:'17',id:17},{label:'18',id:18},{label:'19',id:19},{label:'20',id:20},{label:'21',id:21},{label:'22',id:22},{label:'23',id:23},{label:'24',id:24},{label:'25',id:25},{label:'26',id:26},{label:'27',id:27},{label:'28',id:28},{label:'29',id:29},{label:'30',id:30},{label:'31',id:31},{label:'32',id:32},{label:'33',id:33},{label:'34',id:34},{label:'35',id:35},{label:'36',id:36},{label:'37',id:37},{label:'38',id:38},{label:'39',id:39},{label:'40',id:40},{label:'41',id:41},{label:'42',id:42},{label:'43',id:43},{label:'44',id:44},{label:'45',id:45},{label:'46',id:46},{label:'47',id:47},{label:'48',id:48},{label:'49',id:49},{label:'50',id:50},{label:'51',id:51},{label:'52',id:52},{label:'53',id:53},{label:'54',id:54},{label:'55',id:55},{label:'56',id:56},{label:'57',id:57},{label:'58',id:58},{label:'59',id:59},{label:'60',id:60},{label:'61',id:61},{label:'62',id:62},{label:'63',id:63},{label:'64',id:64},{label:'65',id:65},{label:'66',id:66},{label:'67',id:67},{label:'68',id:68},{label:'69',id:69},{label:'70',id:70},{label:'71',id:71},{label:'72',id:72},{label:'73',id:73},{label:'74',id:74},{label:'75',id:75},{label:'76',id:76},{label:'77',id:77},{label:'78',id:78},{label:'79',id:79},{label:'80',id:80},{label:'81',id:81},{label:'82',id:82},{label:'83',id:83},{label:'84',id:84},{label:'85',id:85},{label:'86',id:86},{label:'87',id:87},{label:'88',id:88},{label:'89',id:89},{label:'90',id:90},{label:'91',id:91},{label:'92',id:92},{label:'93',id:93},{label:'94',id:94},{label:'95',id:95},{label:'96',id:96},{label:'97',id:97},{label:'98',id:98},{label:'99',id:99},{label:'100',id:100}],
				 
	            }
	        },
			onTabItemTap(e) {
			            // tab 点击时执行，此处直接接收单击事件
						setTime(obj).then(res => {
							console.log(res)
							
						})
						this.timeSelctIsShow = false
			            console.log(e)
			        },
	        onLoad() {
	            
	        },
			mounted() {
			 this.getDeviceList()
			},
	        methods: {
				  getVal(val){ 
					console.log('=====',val.label)
				 
					this.deviceListData[this.currentIndex][val.type] = val.val.label
					let obj = {
						endTemp:this.deviceListData[this.currentIndex].endTemp,
						startTemp:this.deviceListData[this.currentIndex].startTemp,
						id:val.id
					}
					uni.showLoading({  title: '请稍后' });
					setTemp(obj).then(res => { 
						uni.showToast({ title: res.msg, duration: 2000})
						console.log(res)
					})
					},
					openOption(index,val,id,type){
						this.currentIndex = index
						this.$refs.gPicker.openPick(val,id,type);
					}, 
				//获取用户信息
				getDeviceList() {
					let param = {
						phone: "18793002958"
					}
				  uni.showLoading({  title: '请稍后' });
					deviceList(param).then(res => { 
						if (res.code == 0 && res.data) { //有用户信息
							 console.log(res)
							 if(res.data.length>0){
								this.deviceListData = res.data
							    uni.hideLoading();
							 }
						} else { //无用户信息
							 
						}
					}).catch(res => { 
					 
					})
				},
	            confrim(e){
					let _this = this
					console.log(e.time)//确定事件 =>12:30-17:30
					let timeArr = e.time.split('-')

					this.deviceListData[_this.currentIndex].startTime = timeArr[0]
					this.deviceListData[_this.currentIndex].endTime = timeArr[1]
					let obj ={
						startTime:_this.deviceListData[_this.currentIndex].startTime,
						id:_this.deviceListData[_this.currentIndex].id,
						endTime:_this.deviceListData[_this.currentIndex].endTime
					}
					
					setTime(obj).then(res => { 
						
					})
					this.timeSelctIsShow = false
				},
				cancel(e){
					console.log(e.time)//取消事件 =>12:30-17:30
					this.timeSelctIsShow = false
				}
	        }
	    }
</script>

<style scoped lang="scss">
	.content{
		.skms-content{
			width: 90%;
			margin: 0 auto;
			border-top: 2px solid rgba(151, 151, 151, 1);
			.skms-item{
				margin-bottom: 40rpx;
				.tit{
					font-size: 36rpx;
					color: #333;
				}
				.time-select{
					display: flex;
					justify-content: space-between;
					.pullDown-box{
						width: 40%;
						padding: 16rpx 0;
						border-radius: 18px;
						background: rgba(238, 245, 255, 1);
						position: relative;
						text-align: center;
					}
					.time-lable{
						
					}
					.pullDown-img{
						position: absolute;
						width: 60rpx;
						height: 30rpx;
						right: 20rpx;
						top: 50%;
						margin-top: -15rpx;
					}
				}
			}
		}
	}
	
</style>
